<template>
  <div class="login_content">
    <div class="form">
      <p class="form_lable">用户名</p>
      <input type="text" v-model="form.username" class="form_input" placeholder="请输入用户名" />
      <p class="form_lable">用户名密码</p>
      <input type="text" v-model="form.password" class="form_input" placeholder="请输入密码" />
      <div role="button" class="button" accesskey="s" @click="submit">登录</div>
    </div>
  </div>
</template>

<script>
//import { loginApi } from "../../api/login";

export default {
  name: "index",
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
    };
  },
  mounted() {
    const self = this;
    window.addEventListener("keydown", function (e) {
      let key = e.keyCode;
      if (key === 13) {
        self.submit();
      }
    });
  },
  watch: {
    'form.username'(item1) {
      this.form.username = item1.replaceAll(" ", "")
    },
    "form.password"(item1) {
      this.form.password = item1.replaceAll(" ", "")
    },
  },
  methods: {
    submit() {
      if (!(this.form.username && this.form.password)) {
        this.$message.info("请输入完整");
        return false;
      }
      let ddd = {
        login: {
          userName: this.form.username,
          password: this.form.password,
        }
      };
      this.$axios.post('http://localhost:9527/cgi-bin/admpassword',ddd).then(res => {
          console.log(res)

          localStorage.setItem(
            "lmx_token",
            `${this.form.username}分割符${this.form.password}`
          );
          this.$router.push({ path: "/layout" });
      }).catch(err =>{
        console.log(err, '未连接服务器')
          this.$message.error("未连接服务器-或者出现异常");
      })
    },
  },
};
</script>

<style scoped>
.login_content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login_content .center,
.form {
  width: 672px;
  height: auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.login_content .form .form_lable {
  align-self: flex-start;
  font-size: 31px;
  color: #969696;
}

.login_content .form .form_input {
  width: 651px;
  height: 72px;
  font-size: 28px;
  outline: none;
  background: linear-gradient(0deg, #dcdcdc, #ffffff);
  box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.75);
  border-radius: 5px;
  border: #0d43a4 solid 10px;
  text-indent: 25px;
}

.form_input::placeholder {
  font-size: 28px;
  color: #969696;
}

.button {
  width: 306px;
  height: 96px;
  text-align: center;
  font-size: 33px;
  font-weight: bold;
  color: #3c590b;
  line-height: 96px;
  background: #a2ce3a;
  margin-top: 72px;
  border-radius: 5px;
}
</style>
